<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>

<style>
    img {
        position: absolute;
        top: 50px;
        left: 50px;
        transform: translate(-50%, -50%);
    }
</style>
<body>

  <img alt="" src="../images/angel.gif">


  <script>

    const img = document.querySelector('img');

    // 1.预先定义一个 timer 节流阀, 节流阀都配合着 setTimeout延迟器使用吗
    let timer = null;
    let flag = true;


    /**
     * 第一种节流阀的方式, 用定时器的返回id来控制
     */
    function throttling(e) {
      // 3.判断节流阀是否为空, 如果不为空, 则证明上次执行间隔不足10ms
      if (timer) {
        return
      }
      timer = setTimeout(() => {
        img.style.left = e.pageX + 'px';
        img.style.top = e.pageY + 'px';
        console.log(1)
        timer = null; // 2.设置了跟随效果后, 清空 timer 节流阀, 方便下次开启延时器
      }, 10)
    }

    /**
     * 第二种节流阀方式, 用一个flag变量来当一把锁
     * 当出现mousemove鼠标移动事件, 判断当前是否拿到了锁, 没有拿到锁, 直接退出
     * 如果拿到了锁, 第一时间将锁住10ms, 在10ms内, 别人是不能拿到锁的
     * @param e
     */
    function throttlingWithFlag(e) {
      if (!flag) {
        return;
      }
      flag = false;
      window.setTimeout(() => {
        img.style.left = e.pageX + 'px';
        img.style.top = e.pageY + 'px';
        console.log(1)
        flag = true;
      }, 10)
    }

    function noThrottling(e) {
      // console.log(`e.pageX: ${e.pageX}, e.pageY: ${e.pageY}`)
      // bug点, 动态给img添加样式, 忘了添加 px
      // 千万不要忘记给 left 给 top 加 单位
      img.style.left = e.pageX + 'px';
      img.style.top = e.pageY + 'px';
      console.log(1);
    }

    document.addEventListener('mousemove', function (e) {
      throttlingWithFlag(e)
      // throttling(e);
      // noThrottling(e);
    })
  </script>
</body>
</html>
